<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<script type="text/javascript">
    //  配置公共的请求头
    axios.defaults.baseURL = 'http://js.cn/';
    //  配置 超时时间
    axios.defaults.timeout = 2500;
    //  配置公共的请求头
    axios.defaults.headers.common['Authorization'] = 'my';
    // 配置公共的 post 的 Content-Type
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

    axios.interceptors.request.use(function(config) {
        console.log(config.url)
        //任何请求都会经过这一步   在发送请求之前做些什么
        config.headers.mytoken = 'nihao';
       // 这里一定要return   否则配置不成功
        return config;
    }, function(err){
        //对请求错误做点什么
        console.log(err)
    })

    //响应拦截器
    axios.interceptors.response.use(function(res) {
        //  在接收响应做些什么
        var data = res.data;
        return data;
    }, function(err){
        //对响应错误处理
        console.log(err)
    })

   // 1. 发送get 请求
    axios.get('api/index.php?a=1&b=2').then(function(ret){
       // 拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
        // 注意data属性是固定的用法，用于获取后台的实际数据
        console.log(ret)
    })
   // 通过params  形式传递get参数
   axios.get('api/index.php', {
       params: {
           id: 789
       },
       headers:{a:1}
   }).then(function(ret){
       console.log(ret)
   })

   //  axios 的 post 请求
   axios.post('api/index.php',
       {
           uname: 'lisi',
           pwd: 123
        },
       {
           headers:{b:1}
       }
   ).then(function(ret){
       console.log(ret)
   })
   //  通过 URLSearchParams  传递post参数
   var params = new URLSearchParams();
   params.append('uname', 'zhangsan');
   params.append('pwd', '111');
   axios.post('api/index.php', params).then(function(ret){
       console.log(ret)
   })


</script>

</body>
</html>